<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
			}

			#model {
				display: none;
			}

			.table thead #insert {
				position: fixed;
				right: 20px;
				top: 0;
			}

			header {
				position: fixed;
				height: 100%;
				width: 100%;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, .5);
				display: none;
				z-index: 2;
			}

			header section {
				width: 500px;
				position: absolute;
				left: 50%;
				top: 35%;
				transform: translate(-250px);
				background: #fff;
				border-radius: 20px;
				padding: 20px;
			}

			header section span {
				position: absolute;
				top: 5px;
				right: 20px;
				font-size: 30px;
				cursor: pointer;
				transition: all 0.5s;
			}

			header section span:hover {
				transform: rotate(90deg);
			}

			footer {
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.3);
				z-index: 2;
				display: none;
			}

			footer main {
				width: 500px;
				height: 300px;
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left: -250px;
				margin-top: -150px;
				padding: 0 10px;
				background: #fff;
			}

			footer main h3 {
				float: left;
				width: 100%;
				font-size: 30px;
				text-align: center;
				line-height: 40px;
				color: red;
				margin: 20px 0 10px 0;
			}

			footer main h1,
			footer main h2 {
				float: left;
				width: 50px;
				font-weight: normal;
				font-size: 18px;
				text-align: center;
				line-height: 26px;
				color: black;
				margin-right: 10px;
				border: 1px solid #444;
				cursor: pointer;
				background: deepskyblue;
				color: #fff;
				border-radius: 5px;
			}
			i{
				color: #0064EA;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<h2>你好：<b id="uname"></b> <i id="eswa">[退出登录]</i></h2>
		<header>
			<section>
				<span id="xxx">×</span>
				<div class="form-group">
					<label for="newName">姓名</label>
					<input type="text" class="form-control" id="newName" placeholder="请输入学生姓名">
				</div>
				<div class="form-group">
					<label for="newAge">年龄</label>
					<input type="number" class="form-control" id="newAge" placeholder="请输入学生年龄">
				</div>
				<div class="form-group">
					<label>所在城市</label>
					<select id="prov"></select>
					<select id="area"></select>
					<select id="mall"></select>
				</div>
				<div class="form-group">
					<label class="radio-inline">
						<input type="radio" name="sex" id="boy" value="option1"> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="sex" id="girl" value="option2" checked> 女
					</label>
				</div>
				<button type="submit" class="btn btn-primary" id="send">确认提交</button>
				<button type="button" class="btn btn-primary" id="esc">取消</button>
			</section>
		</header>
		<table class="table">
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>
						籍贯
					</th>
					<th>
						操作
						<input type="button" id="insert" value="插入学生信息" class="btn btn-primary" />
					</th>
				</tr>
			</thead>
			<tbody>
				<tr id="model">
					<td class="id"></td>
					<td class="name"></td>
					<td class="sex"></td>
					<td class="age"></td>
					<td class="city"></td>
					<td>
						<input type="button" class="btn btn-danger delete" value="删除" />
						<input type="button" class="btn btn-primary update" value="修改" />
					</td>
				</tr>
			</tbody>
		</table>
		<footer>
			<main>
				<h3>是否删除，该过程不可逆！</h3>
				<h1 id="H1">确定</h1>
				<h2 id="H2">取消</h2>
			</main>
		</footer>
		<script src="citys.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="prevs.js"></script>
		<script src="jquery.min.js" type="text/javascript"></script>
		<script src="urla.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$.ajax({
				url: `${url}/selun`,
				data: {
					uname: sessionStorage.getItem("uname"),
					pwd: sessionStorage.getItem("pwd")
				},
				async: false,
				success(data) {
					if (data !== "success") {
						location.href = `${url}/login.html`
					}
				}
			})
			$("#uname").html(sessionStorage.getItem("uname"));
			$("#eswa").click(()=>{
				sessionStorage.clear();
				location.href = `${url}/login.html`
			})
		
			let header = $("header");
			let prov = $("#prov");
			let areas = $("#area");
			let malls = $("#mall");
			//重置city

			let ast;
			let mst;
			citys.forEach(item => {
				let op = $(`<option>${item.provinceName}</option>`)
				prov.append(op);
			})

			prov.change(function() {
				areas.empty();
				malls.empty();
				ast = this.selectedIndex;
				let cityList = citys[ast].mallCityList;
				cityList.forEach(item => {
					let op = $(`<option>${item.cityName}</option>`);
					areas.append(op);
				})
				cityList[0].mallAreaList.forEach(item => {
					let op = $(`<option>${item.areaName}</option>`);
					malls.append(op);
				})

			})
			areas.change(function() {
				malls.empty();
				mst = this.selectedIndex;
				let list = citys[ast].mallCityList[mst].mallAreaList;
				list.forEach(item => {
					let op = $(`<option>${item.areaName}</option>`);
					malls.append(op);
				})
			})
			// 查
			$.ajax({
				url: `${url}/sel`,
				success(data) {
					var data = JSON.parse(data);
					data.forEach(item => {
						let demo = $("#model").clone(true);
						demo.find(".id").html(item.id);
						demo.find(".name").html(item.name);
						demo.find(".sex").html(item.sex ? "男" : "女");
						demo.find(".age").html(item.age);
						demo.find(".city").html(item.city);
						demo.attr("id", "").appendTo("table tbody")
					})
				}
			})

			//加
			$("#insert").click(() => {
				ast = 0;
				mst = 0;
				prov[0].selectedIndex = 0;
				areas.empty();
				malls.empty();
				citys[0].mallCityList.forEach(item => {
					let op = $(`<option>${item.cityName}</option>`)
					areas.append(op);
				})
				citys[0].mallCityList[0].mallAreaList.forEach(item => {
					let op = $(`<option>${item.areaName}</option>`)
					malls.append(op);
				})
				header.fadeIn();
				$("#newName").val("");
				$("#newAge").val("");
				$("#send").click(() => {
					if (!$("#newName").val() || !$("#newAge").val()) {
						alert("姓名与年龄不能为空！！！")
						return;
					}
					$.ajax({
						type: "get",
						url: `${url}/add`,
						data: {
							name: $("#newName").val(),
							age: $("#newAge").val(),
							city: prov.val() + areas.val() + malls.val(),
							sex: $("#boy")[0].checked ? 1 : 0
						},
						success(data) {
							if (data === "success") {
								alert("添加成功");
								history.go(0);
							} else {
								alert("添加失败")
							}
						}
					});
				})
			})
			//
			$("#esc").click(() => {
				header.fadeOut();
			})
			$("#xxx").click(() => {
				$("#esc").click();
			})

			//删
			$(".delete").click(function() {
				$("footer").fadeIn();
				$("#H1").click(() => {
					$.ajax({
						type: "get",
						async: true,
						data: {
							id: $(this).closest("tr").find(".id").html()
						},
						url: `${url}/del`,
						success(data) {
							if (data === "success") {
								alert("删除成功");
								history.go(0);
							} else {
								alert("删除失败")
							}
						}
					});
				})
				$("#H2").click(() => {
					$("footer").fadeOut();
				})
			})
			//改
			$(".update").click(function() {
				header.fadeIn();
				$("#newName").val($(this).closest("tr").find(".name").html());
				$("#newAge").val($(this).closest("tr").find(".age").html());
				$(this).closest("tr").find(".sex").html() === "男" ? $("#boy")[0].checked = "checked" : $("#girl")[0].checked =
					"checked";
				let cit = chai($(this).closest("tr").find(".city").html());
				let provo = $("#prov option");
				for (let i = 0; i < provo.length; i++) {
					if (provo.eq(i).html() === cit[0]) {
						prov[0].selectedIndex = i;
						ast = i;
						break;
					}
				}
				areas.empty();
				citys[ast].mallCityList.forEach(item => {
					let op = $(`<option>${item.cityName}</option>`)
					areas.append(op);
				})
				let areao = $("#area option");
				for (let i = 0; i < areao.length; i++) {
					if (areao.eq(i).html() === cit[1]) {
						areas[0].selectedIndex = i;
						mst = i;
						break;
					}
				}
				malls.empty();
				citys[ast].mallCityList[mst].mallAreaList.forEach(item => {
					let op = $(`<option>${item.areaName}</option>`)
					malls.append(op);
				})
				let mallo = $("#mall option");
				for (let i = 0; i < mallo.length; i++) {
					if (mallo.eq(i).html() === cit[2]) {
						malls[0].selectedIndex = i;
						break;
					}
				}
				$("#send").click(() => {
					$.ajax({
						type: "get",
						url: `${url}/upt`,
						data: {
							id: $(this).closest("tr").find(".id").html(),
							name: $("#newName").val(),
							age: $("#newAge").val(),
							city: prov.val() + areas.val() + malls.val(),
							sex: $("#boy")[0].checked ? 1 : 0
						},
						success(data) {
							if (data === "success") {
								alert("修改成功");
								history.go(0);
							} else {
								alert("修改失败")
							}
						}
					});
				})
			})
		</script>

	</body>

</html>
